<template>
  <fks-dialog
    :visible="visible"
    width="480px"
    @close="close"
    @open="open"
  >
    <div slot="title">
      <i class="fks-icon-edit" />
      {{ LANG.CIRCULATION }}
    </div>
    <fks-form
      ref="circulationForm"
      :model="form"
      label-width="85px"
    >
      <fks-form-item
        :label="LANG.FORM_NAME"
        prop="title"
      >
        <fks-input
          v-model="form.title"
          readonly
        />
      </fks-form-item>
      <fks-form-item
        :label="LANG.CREATOR"
        :span="24"
        prop="senderUserName"
      >
        <fks-user-selector
          readonly
          style="width: 100%;"
          :username.sync="form.senderUserName"
          :userfullname.sync="form.senderUserFullName"
        />
      </fks-form-item>
      <fks-form-item
        :label="LANG.RECEIVER"
        required
        :span="24"
        prop="receiverUserName"
      >
        <fks-user-selector
          style="width: 100%;"
          multiple
          :username.sync="form.receiverUserName"
          :userfullname.sync="form.receiverUserFullName"
        />
      </fks-form-item>
      <fks-form-item
        :label="LANG.CC_NOTIFYMETHODS"
        required
        prop="notify"
      >
        <fks-checkbox-group
          v-model="notifyMethods"
          @change="handleNotifyMethodsChange"
        >
          <fks-checkbox
            v-for="item in notifyMethodOptions"
            :key="item.value"
            :label="item.value"
          >
            {{ item.label }}
          </fks-checkbox>
        </fks-checkbox-group>
      </fks-form-item>
    </fks-form>
    <div slot="footer">
      <!-- <fks-button @click="close" plain type="primary">{{LANG.CANCEL}}</fks-button> -->
      <fks-button
        type="primary"
        icon="fks-icon-check"
        @click="submit"
      >
        {{
          LANG.SUBMIT
        }}
      </fks-button>
    </div>
  </fks-dialog>
</template>

<script>
import { newCirculation } from '../api'
export default {
  name: 'NewCirculation',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    taskInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      form: {
        title: '',
        senderUserFullName: '',
        senderUserName: '',
        receiverUserName: '',
        receiverUserFullName: '',
        notify: ''
      },
      notifyMethods: [],
      notifyMethodOptions: [
        {
          label: '站内信',
          value: '0'
        },
        {
          label: '短信',
          value: '1'
        },
        {
          label: '邮件',
          value: '2'
        }
      ]
    }
  },
  computed: {
    currentUser() {
      return JSON.parse(this.$storage.get('user'))
    }
  },
  methods: {
    handleNotifyMethodsChange(val) {
      if (val && val.length && val.length > 0) {
        this.$set(this.form, 'notify', JSON.stringify(val))
      } else {
        this.$set(this.form, 'notify', '')
      }
    },
    submit() {
      this.$refs.circulationForm.validate((valid) => {
        if (valid) {
          const data = Object.assign(this.form, {
            formBizId: this.taskInfo.formBizId,
            formKey: this.taskInfo.formKey,
            taskId: this.taskInfo.taskId,
            processInstanceId: this.taskInfo.processInstanceId,
            processType: this.taskInfo.ext1 ? '2' : '1'
          })
          newCirculation(data).then((res) => {
            if (res.status) {
              this.$message({
                message: this.LANG.CC_INITIATED_SUCCESS,
                type: 'success'
              })
              this.close()
            }
          })
        }
      })
    },
    close() {
      this.$emit('update:visible', false)
    },
    open() {
      this.form = {
        senderUserFullName: this.currentUser.userFullname,
        senderUserName: this.currentUser.userName,
        receiverUserName: '',
        receiverUserFullName: '',
        title: this.taskInfo.formName || ''
      }
      this.notifyMethods = []
      this.$nextTick(() => {
        this.$refs.circulationForm.clearValidate()
      })
    }
  }
}
</script>

<style></style>
